<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="zh-cmn-Hans" > <![endif]-->
<html class="no-js" lang="zh-cmn-Hans" >

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}{% endblock title %} | GateWay</title>

  <link rel="stylesheet" href="{{ url_for('static', filename='css/normalize.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/foundation.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/foundation-icons.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
  {% block head %}{% endblock head %}

  <script src="{{ url_for('static', filename='js/vendor/modernizr.js') }}"></script>
</head>

<body>
  {% block header %}
  <!-- start of header -->
  <header class="contain-to-grid">
    <div class="row">
      <div class="large-5 columns">
        <a href="/"><h2>Flex GateWay</h2></a>
      </div>
    </div>
  </header>
  <!-- end of header -->
  {% endblock header %}

  {% block header_bar %}
  <!-- start of header-bar -->
  <div id="nav" class="row">
    <div class="large-12 columns">
      <nav class="top-bar" data-topbar>
        <ul class="title-area">
          <li class="name">
            <h1><a href="/"><i class="fi-home"></i></a></h1>
          </li>
          <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
        </ul>
        <section class="top-bar-section">
          <!-- Right Nav Section -->
          <ul class="left">
            <li{% if 'sts.' in request.endpoint %} class="active" {% endif %}><a href="/vpn/sts/">IPSec VPN</a></li>
            <li{% if 'dial.' in request.endpoint %} class="active" {% endif %}><a href="/vpn/dial/">拨号 VPN</a></li>
            <li{% if 'snat.' in request.endpoint %} class="active" {% endif %}><a href="/snat">SNAT</a></li>
          </ul>
          <ul class="right">
            <li{% if 'docs.' in request.endpoint %} class="active" {% endif %}><a href="/docs"><i class="fi-page-doc"> </i>文档</a></li>
            <li><a href="#" id="checkupdate">检查更新</a></li>
            <li><a href="/logout"><i class="fi-torso-business"> </i>{{ g.account }} 退出</a></li>
          </ul>
        </section>
      </nav>
    </div>
  </div>
  <!-- end of header-bar -->
  {% endblock header_bar %}

  {% block trail_all %}
  <!-- start of trail -->
  <div id="trail" class="row">
    <div class="large-12 columns">
      <ul class="breadcrumbs">
        {% block trail %}{% endblock trail %}
      </ul>
    </div>
  </div>
  <!-- end of trail -->
  {% endblock trail_all %}

  <!-- start of content -->
  <div id="content" class="row">
    {% block content %}{% endblock content %}
  </div>
  <!-- end of content -->

  <!-- start of footer -->
  <footer class="row">
    <div class="large-6 columns">
      <small>
        a vpn, snat web app for ecs.
      </small>
    </div>
    <div class="large-6 columns">
      <small class="right">
        © 2014-2015 Flex GateWay Project.
      </small>
    </div>
  </footer>
  <!-- end of footer -->

  <script src="{{ url_for('static', filename='js/vendor/jquery.js') }}"></script>
  <script src="{{ url_for('static', filename='js/foundation.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/checkupdate.js') }}"></script>
  <script>
    $(document).foundation();
  </script>
  {% block jsplugin %}{% endblock jsplugin %}
</body>

</html>
